<template>
    <div id="ArriveDetail" :style="{ 'transition': isCollapse ? '.6s all' : '.35s all', 'width': isCollapse ? myWidth1 : myWidth2 }">
        <div class="top">报道信息</div>

        <el-descriptions class="margin-top" style="    width: 95%;margin-left: 2.5%;margin-top: 15px;" :column="3" :size="size" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    姓名
                </template>
                {{ studentdetail.name}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-female"></i>
                    性别
                </template>
                {{ studentdetail.gender=='1'?'男':'女'}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                {{ userdetail.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    学号
                </template>
                {{studentdetail.number}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-postcard"></i>
                    身份
                </template>
                <el-tag size="small">学生</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    专业
                </template>
                {{ studentdetail.majorGetDTO.name }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-check"></i>
                    报道状态
                </template>
                已报道
                
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template slot="label">
                    <i class="el-icon-time"></i>
                    流程更新时间
                </template>
                {{studentdetail.userGetCheckTDO.time}}
            </el-descriptions-item>
            
            <el-descriptions-item :span="3">
                <template slot="label">
                    <i class="el-icon-copy-document"></i>
                    缴费状态
                </template>
                <span ref="billstatus"></span>
                <router-link to="/BillMange" 
                    style="text-decoration: none;color: #40b6ff;font-size: 5px;float: right;margin-right: 10px;"
                    >上传缴费凭证?</router-link>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-school"></i>
                    宿舍号
                </template>
                <span ref="dormitorystatus"></span>
                <router-link to="/DormitoryMange"
                    style="text-decoration: none;color: #40b6ff;font-size: 5px;float: right;margin-right: 10px;">选宿舍？</router-link>
            </el-descriptions-item>
        </el-descriptions>



        <el-button @click="forPDF()" class="btn_Pdf">打印凭证</el-button>
        <!-- 打印的凭证 -->
        <div id="outside" >
            <MyPdf 
                :isPdf="isPdf" 
                v-bind:studentdetail="studentdetail"
                v-bind:userdetail="userdetail" 
                v-bind:active="active"
                ref="child"
                ></MyPdf>
        </div>
    </div>
</template>
<script>
import MyPdf from "@/components/MyPDF.vue"
export default {
    components:{MyPdf},
    data(){
        return{
            size: '',
            isPdf:"",
            myWidth1: "",//未展开的宽度
            myWidth2: "",//展开了的宽度
            
        }
    },
    props:{
        isCollapse :true,
        studentdetail:{},
        userdetail:{},
        active:""
    },
    methods:{
        forPDF(){
            this.$refs.child.forPDF();
        },
        detailMounted(){
            // console.log("验证active"+this.active);
            this.$refs["billstatus"].innerHTML=this.active>=3?"凭证已上传":"凭证未上传";
            this.$refs["dormitorystatus"].innerHTML = this.active >= 4 ? this.studentdetail.dormitoryGetTDO.buildingEntity.bid + "#" + this.studentdetail.dormitoryGetTDO.number : "未选择宿舍";
            
        }
    },
    mounted() {
        //初始化报道凭证信息
        this.detailMounted();
        // this.myHeight = window.innerHeight - 40 - 40 - 20 + "";
        this.myWidth1 = window.innerWidth - 64 - 45 + "px"
        this.myWidth2 = window.innerWidth - 200 - 45 + "px"
    },
}
</script>

<style scoped>
#outside{
    display: none;
    margin-top: 100px;
}
#ArriveDetail{
    float: left;
    background-color: #ffffff;
    height: 355px;
    margin-top: 10px;
}
#ArriveDetail .top{
    height: 50px;
    text-indent: 2em;
    line-height: 50px;
    text-align: 50px;
    font-weight: 600;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
}
#ArriveDetail .btn_Pdf{
    margin-top: 10px;
    float: right;
    margin-right: 2.5%;
}
</style>